<template>
  <el-container class="main-page">
    <el-header>
      <div class="main-header">
        <div class="logo">
          <img :src="headerInfo.logo" />
        </div>
        <div class="title">
          <h1>{{ headerInfo.title }}</h1>
        </div>
        <div class="tool">
          <el-tooltip effect="dark" content="查看个人信息" placement="left">
            <img :src="user.avatar" @click="openTab('user')" />
          </el-tooltip>
          <span @click="openTab('user')" style="cursor: pointer;">{{ user.name }}</span>
          <el-tooltip effect="dark" :content="user.clientName" placement="bottom">
            <el-text truncated class="client-name">{{user.clientName}}</el-text>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="安全退出"
            placement="bottom-end"
            @click="logOut"
          >
            <i class="iconfont icon-exit-full" @click="logOut"></i>
          </el-tooltip>
        </div>
      </div>
    </el-header>
    <el-container class="main-page">
      <el-aside class="no-select">
        <el-menu unique-opened :default-openeds="[menuOpeneds]">
          <el-sub-menu v-for="item in menuList" :key="item.id" :index="item.id">
            <template #title>
              <i :class="'iconfont ' + item.icon"></i>{{ item.title }}
            </template>
            <div class="menu-item-div">
              <el-menu-item
                v-for="itm in item.items"
                :key="itm.id"
                :index="itm.id"
              >
                <i @click="openTab(itm.name)">{{ itm.title }}</i>
              </el-menu-item>
            </div>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <main-card ref="MANGER_CARD" />
      </el-main>
    </el-container>
  </el-container>
  <user-dlg ref="USER_CARD" @done="userRefresh"/>
</template>

<script>
import util from "@/assets/js/util";
import mqtt from "@/assets/js/mqtt";
import UserDlg from "@/components/dialog/UserDlg.vue";
import MainCard from "@/components/fun_mod/MainCard.vue";
import { ElNotification } from "element-plus";
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  ref,
  reactive,
  onUpdated,
} from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  components: {
    MainCard,
    UserDlg,
  },
  setup() {
    const Global = getCurrentInstance().proxy;
    const router = useRouter();
    let headerInfo = reactive({
      title: Global.$const.APP_TITLE,
      logo: Global.$const.APP_LOGO,
    });
    let user = reactive({
      name: Global.$var.user.name,
      avatar: Global.$var.user.avatar,
      power: Global.$var.user.power,
      status: Global.$var.user.status,
      clientName: Global.$var.user.clientName,
      dtCreate: Global.$var.user.dtCreate,
    });

    onMounted(() => {
      if (user.name == "" && user.power*1 == 0) {
        ElNotification({
          title: "无效的身份信息",
          message: "请重新登录",
          type: "error",
          duration: 2000,
        });
        setTimeout(() => {
          logOut();
        }, 2000);
      } else {
        init();
      }
    });

    let menuList = ref([]);
    let menuOpeneds = ref(user.power<80?'3':'');
    function init() {
      let md = Global.$const.MENU_DATA;
      for (let i in md) {
        if (user.power*1 > 90) {
          menuList.value.push(md[i]);
        }
        if (user.power*1 > 80 && user.power*1 < 90) {
          if (md[i].id >= 2) menuList.value.push(md[i]);
        }
        if (user.power*1 > 0 && user.power*1 < 80) {
          if (md[i].id == 3) menuList.value.push(md[i]);
        }
        // 除了厂家操作员，其他操作员不可上传应用，隐藏应用列表选项
        if (user.power*1 <= 90) {
          let m = menuList.value
          for(let i in m) {
            for(let j in m[i].items) {
              if (m[i].items[j].id == '4-1') {
                m[i].items.splice(j,1)
              }
            }
          }
          menuList.value = m
        }
      }
      let t = util.elTabStatus("get");
      if (!util.isNull(t.tabs)) {
        let ts = t.tabs.split(",");
        for (let i in ts) {
          openTab(ts[i]);
        }
        openTab(t.tab);
      }
    }

    let MANGER_CARD = ref(null);
    let USER_CARD = ref(null)
    function openTab(n) {
      let md = menuList.value;
      let mds = [];
      // if (user.power*1 == 99) {
      //    mds.push({ name: "user", title: "个人信息" })
      // } else 
      if (n == 'user') {
        USER_CARD.value.open()
        return
      }
      for (let i in md) {
        for (let j in md[i].items) {
          mds.push(md[i].items[j]);
        }
      }
      for (let i in mds) {
        if (n == mds[i].name) {
          MANGER_CARD.value.addTab(n, mds[i].title);
        }
      }
    }

    // 更新user信息
    function userRefresh() {
      user.name = Global.$var.user.name
    }

    // 退出登录
    function logOut() {
      mqtt.logout('');
    }

    function isNull(v) {
      return util.isNull(v);
    }

    return {
      headerInfo,
      user,
      menuList,
      menuOpeneds,
      MANGER_CARD,
      USER_CARD,
      openTab,
      userRefresh,
      logOut,
      isNull,
    };
  },
});
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 1px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #c8c9cc;
  border-radius: 3px;
}
.iconfont {
  margin: 0 10px;
}
.main-page {
  width: 100%;
  height: auto;
  min-width: $mobile-width + px;
}
.el-aside {
  width: 200px;
  height: calc(100vh - 60px);
  overflow-x: hidden;
  background-color: $color-primary-light;
}
.el-header {
  width: 100%;
  height: 60px;
  padding: 0;
  %flex-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }
  .main-header {
    @extend %flex-view;
    .logo {
      @extend %flex-view;
      width: 200px;
      min-width: 200px;
      border-right: 1px solid #eee;
      border-bottom: 1px solid $color-primary-light;
      font-size: 36px;
      font-weight: 900;
      text-shadow: 1px 1px 1px #999;
      color: #fff;
      background-color: $color-primary;
      img{
        margin-top: -5px;
      }
    }
    .title {
      @extend %flex-view;
      width: 600px;
      background-color: rgb(255, 255, 255);
    }
    .tool {
      @extend %flex-view;
      width: calc(100% - 800px);
      min-width: 320px;
      padding-right: 20px;
      justify-content: flex-end;
      background-color: rgb(255, 255, 255);
      img {
        width: 36px;
        height: auto;
        cursor: pointer;
        margin: 0 5px;
      }
      .client-name{
        max-width: 100px;
        padding: 3px 6px;
        border-radius: 1px;
        color: $color-success;
        background-color: $color-success-away;
        margin: 0 3px;
      }
      .iconfont {
        cursor: pointer;
        margin: 0 10px;
        font-size: 24px;
        color: #666;
        text-shadow: 1px 1px 1px #999;
      }
    }
  }
}
.el-main {
  width: 100%;
  height: calc(100vh - 60px);
  padding: 5px;
  background-color: rgb(249, 249, 249);
}
:deep.el-menu {
  background-color: $color-primary-light;
  .menu-item-div {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .el-sub-menu__title {
    color: #fff;
    background-color: $color-primary;
  }
  .el-sub-menu__title:hover {
    color: #eee;
  }
  .el-menu-item {
    color: #fff;
    background-color: $color-primary-light;
    i {
      // @extend %view-nowrap;
      font-style: normal;
    }
  }
  .el-menu-item:hover {
    color: #eee;
  }
}
</style>